import React, {useState} from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
interface DataType {
    key: React.Key;
    name: string;
    way: string;
    timeliness: string;
}

const columns: ColumnsType<DataType> = [
    {
        title: '等级名称',
        dataIndex: 'name',
        render: (text: string) => <a>{text}</a>,
    },
    {
        title: '获取方式',
        dataIndex: 'way',
    },
    {
        title: '有效期',
        dataIndex: 'timeliness',
    },
];

const data: DataType[] = [
    {
        key: '1',
        name: 'vip',
        way: '直接获取',
        timeliness: '永久有效',
    },
    {
        key: '2',
        name: 'sVip',
        way: '直接获取',
        timeliness: '永久有效',
    },
];
const SonVipTable = () => {
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('radio');
    // rowSelection object indicates the need for row selection
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    return (
        <div>
            <Table
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
            />
        </div>
    );
};

export default SonVipTable;